<template>
  <div id="app" :style="{backgroundImage: bkState}">
    <Light/>
    <Circles/>
    <ThumbNail/>
    <Magnifier/>
    <AMask v-if="this.$store.state.isSwitching"/>
    <SwitchPics/>
    <DownLoad/>
    <Lock/>
    <EntryDialog/>
    <UserMenu/>
  </div>
</template>

<script>
// import bgi_day from '@/assets/background_day.gif';
// import bgi_night from '@/assets/background_night.gif';
import Light from '@/components/Light';
import Circles from "@/components/Circles";
import ThumbNail from "@/components/ThumbNail";
import Magnifier from "@/components/Magnifier";
import SwitchPics from "@/components/SwitchPics";
import AMask from "@/components/Mask";
import DownLoad from "@/components/DownLoad";
import Lock from '@/components/Lock';
import EntryDialog from "@/components/EntryDialog";
import UserMenu from "@/components/UserMenu";

export default {
  name: 'App',
  components: {
    Light,
    Circles,
    ThumbNail,
    Magnifier,
    SwitchPics,
    AMask,
    DownLoad,
    Lock,
    EntryDialog,
    UserMenu,
  },
  computed: {
    bkState() {
      // return this.$store.state.lightState ? "white" : "black"
      return this.$store.state.lightState ? `url(background_day.gif)` : `url(background_night.gif)`
    },
  },
  created() {
    this.$store.commit('LoadSettings');
    this.$store.dispatch("checkToken");
  },
}
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  #app {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color 0.75s ease;
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>


